<template>
  <div class="home">
    <!--轮播图-->
    <div class="header">
      <div class="name">{{ userInfo ? userInfo.kdusername : '' }}，欢迎您~</div>
      <div class="currentCenter" @click="handleSelect()">
        <div class="txt">当前登录：</div>
        <div class="txt1">
          {{ fixCenterName ? fixCenterName : '请选择' }}
          <i class="iconfont icon-right"></i>
        </div>
      </div>
      <!-- 下拉选择弹窗 -->
      <van-popup v-model="showSelectPicker" position="bottom">
        <van-field name="模糊查询" input-align="left" v-model="likeWho" label="模糊查询" placeholder="请输入模糊查询关键词" />
        <van-picker show-toolbar :columns="columns" @confirm="handleSelectConfirm" @cancel="showSelectPicker = false" value-key="name" />
      </van-popup>
    </div>

    <!-- 菜单 -->
    <!-- <div class="menu">
      <div
        class="menu_item"
        v-for="(item, index) in menuList"
        :key="index"
        @click="goRouter(item)"
      >
        <div class="menu_itembox">
          <i :class="`iconfont ${item.icon}`"></i>
        </div>
        <div class="menu_name">{{ item.name }}</div>
      </div>
    </div>-->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in bannerList" :key="index">
        <!-- <img :src="`@/assets/images/${item}`" /> -->
        <img class="banner_img" :src="require(`@/assets/images/${item}`)" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :column-num="4">
      <van-grid-item v-for="(item, index) in menuList" :key="index" :icon="item.icon2" :text="item.name" @click="goRouter(item)" />
    </van-grid>
  </div>
</template>

<script>
import { Grid, GridItem } from "vant";
import homeApi from "@/api/homeApi";
import commonApi from "@/api/commonApi";
import { getCookies, getFieldName } from "@/utils/util.js";

export default {
  data() {
    return {
      menuList: [
        {
          icon: "icon-dj",
          name: "评估管理",
          url: "/assessManage",
          icon2: "label-o"
        },
        {
          icon: "icon-yy",
          name: "采购管理",
          url: "/buyManage",
          icon2: "balance-pay"
        },
        {
          icon: "icon-case",
          name: "库存管理",
          url: "/inventoryManage",
          icon2: "logistics"
        },
        { icon: "icon-gd", name: "销售线索", url: "/salesLeads", icon2: "qr" },
        {
          icon: "icon-jqr",
          name: "销售管理",
          url: "/salesManage",
          icon2: "apps-o"
        },
        {
          icon: "icon-jqr",
          name: "客户管理",
          url: "/customManage",
          icon2: "friends-o"
        },
        {
          icon: "icon-sj",
          name: "附属表",
          url: "/attachedTable",
          icon2: "points"
        },
        {
          icon: "",
          name: "",
          url: "",
          icon2: ""
        }
      ],
      userId: getCookies("userId"),
      fixCenterList: [],
      fixCenterName: "",
      fixCenterId: "",
      userInfo: JSON.parse(getCookies("userInfo")),
      showSelectPicker: false,
      bannerList: ["banner.jpg"],
      skipUrl: "",
      likeWho: "",
      columns: []
    };
  },
  components: {
    Grid,
    GridItem
  },
  watch: {
    fixCenterId: {
      handler: function(val, oldVal) {
        if (val) {
          localStorage.setItem("orgId", this.fixCenterId);
        }
      },
      deep: true,
      immediate: false
    },
    skipUrl: {
      handler: function(val, oldVal) {
        if (val) {
          localStorage.setItem("billId", localStorage.getItem("assBillId"));
          this.$router.push({
            path: this.skipUrl
            // query: { billId: localStorage.getItem("assBillId") },
          });
        }
      },
      deep: true,
      immediate: true
    },
    likeWho: function(nval, oval) {
      if (nval) {
        let newArr = this.fixCenterList.filter(item => {
          return item.name.indexOf(nval) > -1;
        });
        console.log(newArr);
        this.columns = newArr;
      } else {
        this.columns = this.fixCenterList;
      }
    }
  },
  mounted() {
    localStorage.setItem("skipUrl", "");
    // console.log(this.$route)
    if (this.$route.query && this.$route.query.isGet) {
      localStorage.setItem("isGet", this.$route.query.isGet);
    }
    if (
      this.$route.query &&
      this.$route.query.skipUrl &&
      this.$route.query.billId
    ) {
      localStorage.setItem("assBillId", this.$route.query.billId);
      localStorage.setItem("skipUrl", this.$route.query.skipUrl);
      // this.$router.push({
      //   path: this.$route.query.skipUrl,
      //   query: { billId: this.$route.query.billId },
      // })
    }
    this.getUserInfo();
  },

  methods: {
    getUserInfo() {
      homeApi.getUseInfo({}).then(res => {
        localStorage.setItem("userId", res.kduserid);
        localStorage.setItem("userInfo", JSON.stringify(res));
        this.userInfo = res;
        this.userId = res.kduserid;
        this.getMainFixCenter();
      });
    },
    // 获取维修中心
    getMainFixCenter() {
      commonApi
        .getMainFixCenter({
          orgId: "test",
          userId: this.userId,
          type: ""
        })
        .then(res => {
          if (res.data) {
            this.fixCenterList = res.data;
            if (localStorage.getItem("orgId")) {
              this.fixCenterId = localStorage.getItem("orgId");
              this.fixCenterName = getFieldName(
                res.data,
                "billId",
                this.fixCenterId
              );
            } else {
              this.fixCenterId = res.data[0].billId;
              this.fixCenterName = res.data[0].name;
              localStorage.setItem("orgId", this.fixCenterId);
            }
            if (localStorage.getItem("skipUrl")) {
              this.skipUrl = localStorage.getItem("skipUrl");
            }
          }
        });
    },

    goRouter(data) {
      if (!data.url) return;
      this.$router.push(data.url);
    },
    handleSelect() {
      this.columns = this.fixCenterList;
      this.showSelectPicker = true;
    },
    handleSelectConfirm(value) {
      this.fixCenterId = value.billId;
      this.fixCenterName = value.name;
      this.showSelectPicker = false;
      this.likeWho = "";
    }
  }
};
</script>

<style lang="less" scoped="">
@font-face {
  font-family: "iconfont"; /* Project id 4176972 */
  src: url("//at.alicdn.com/t/c/font_4176972_s8s6zd59eop.woff2?t=1689868658391")
      format("woff2"),
    url("//at.alicdn.com/t/c/font_4176972_s8s6zd59eop.woff?t=1689868658391")
      format("woff"),
    url("//at.alicdn.com/t/c/font_4176972_s8s6zd59eop.ttf?t=1689868658391")
      format("truetype");
}
body {
  background: #f8f8f8;
}
.home {
  max-width: 375px;
  background: #f8f8f8;
  padding-bottom: 0.2rem;
  margin: auto;
}
#container {
  width: 100%;
  height: 300px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 15px;
  .name {
    font-size: 15px;
  }

  .currentCenter {
    display: flex;
    align-items: center;
    .txt {
      font-size: 13px;
      color: #666;
    }
    .txt1 {
      font-size: 15px;
      .iconfont {
        font-size: 15px;
        color: #666;
      }
    }
  }
}

.menu {
  padding: 0.25rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: #fff;
  margin: 0 0.25rem;
  border-radius: 10px;
  .menu_item {
    width: 25%;
    text-align: center;
    align-items: center;
    align-self: center;
    margin-bottom: 0.2rem;
    .menu_itembox {
      height: 1rem;
      width: 1rem;
      background: #f3f3f3;
      border-radius: 50%;
      margin: auto;
      margin-bottom: 0.2rem;
    }
    .iconfont {
      font-size: 0.54rem;
      margin-bottom: 0.3rem;
      display: block;
      line-height: 1rem;
      color: #011778;
    }
    .menu_name {
      font-size: 0.28rem;
    }
    &:nth-child(n + 5) {
      margin-bottom: 0;
    }
  }
}
.banner_img {
  width: 100%;
}
</style>
